<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Tiendalia - Administración Categorías</title>
    </h:head>
    <h:body>
        <ui:composition template="template.xhtml">
            <ui:define name="sidebar">
                <ui:include src="adminmenu.xhtml"/>
            </ui:define>
            <ui:define name="content">
                <h:form id="newCategoryForm" styleClass="editForm" prependId="false">
                    <p:dataTable id="categoriesTable" styleClass="adminTable" var="category" value="#{admCategoriesBean.categories}" selectionMode="single"
                                 selection="#{admCategoriesBean.currentCategory}" editable="true" editMode="row" >
                        <f:facet name="header">
                            <h:outputText styleClass="headerTitle" value="Categorías" />
                            <p:graphicImage styleClass="imgBtn" url="resources/images/addCategory.png" alt="Añadir categoría" title="Añadir categoría" onclick="panel.toggle();"/>
                            <p:messages id="admCategoriesMessages" autoUpdate="true"/>
                            <p:panel id="pnl" collapsed="true" toggleable="true" widgetVar="panel" >
                                <h:outputLabel styleClass="title" value="Nueva categoría" rendered="#{empty admCategoriesBean.currentCategory}"/>

                                <p:panelGrid columns="2" columnClasses="editLabel, editValue">
                                    <h:outputLabel value="Nombre: " for="newcategoryname" />
                                    <p:inputText id="newcategoryname" value="#{admCategoriesBean.categoryName}"/>
                                </p:panelGrid>
                                <p:commandButton value="Añadir a la tienda" action="#{admCategoriesBean.insertCategory}" update="categoriesTable"/>

                            </p:panel>
                        </f:facet>
                        <p:ajax event="rowEdit" listener="#{admCategoriesBean.onRowEdit}"    process="@none" update="admCategoriesMessages" />
                        <p:column styleClass="dataColumn" headerText="ID">
                            <h:outputText value="#{category.id}" />
                        </p:column>
                        <p:column styleClass="dataColumn" headerText="Nombre">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <p:commandLink action="#{admCategoriesBean.goToCategory(category.id)}" value="#{category.name}" process="@this" />
                                </f:facet>
                                <f:facet name="input">
                                    <p:inputText id="editName" value="#{category.name}" style="width:96%"/>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column styleClass="dataColumn" headerText="Visibilidad">
                            <p:cellEditor>
                                <f:facet name="output">
                                    <h:outputText value="#{category.visibilityString}" />
                                </f:facet>
                                <f:facet name="input">
                                    <h:selectOneMenu value="#{category.isVisible}" style="width:100%">
                                        <f:selectItems value="#{admCategoriesBean.visibilities}" var="vis" itemLabel="#{vis}" itemValue="#{vis}"  />
                                    </h:selectOneMenu>
                                </f:facet>
                            </p:cellEditor>
                        </p:column>
                        <p:column style="width:6%">
                            <p:rowEditor />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

